<template>
	<div class="cloneContainer">
		<a-menu v-if="pojectInfo.template == 1" style="background: transparent;min-width: 0;margin-bottom: 20px" v-model:selectedKeys="menus.currentId" mode="horizontal" :items="[{label: '全部', key: ''}, ...menus.structure]" @select="show" />
		<div class="header">
			<a-input v-model:value="searchData['search_AND_LIKE_student.name']" autocomplete="off" :placeholder="t('control', '请输入姓名')" style="width:200px;margin-right: 12px" />
			<div>
				<a-button type="primary" @click="(tableData=[]) & show()">{{ t('control', '查询') }}</a-button>
				<a-button style="margin-left: 10px" @click="(searchData = {}) & show()">{{ t('control', '重置') }}</a-button>
			</div>
		</div>
		<div class="content">
			<div style="flex:1;min-height: 0;overflow: auto;">
				<a-table
					:key="activeName"
					:dataSource="tableData" :columns="columns" :pagination="false">
					<template #bodyCell="{ column, text, record, index }">
						<template v-if="column.dataIndex === 'studentName'">
							<span>
								{{ text }}<a-tag style="margin-left: 10px;" color="success" v-if="record.leader">{{t('control', '小组组长')}}</a-tag>
							</span>
						</template>
						<template v-if="column.dataIndex === 'joinStatus'">
							<span>
								{{ text === 1 ? t('control','已加入') : t('control','未加入') }}
							</span>
						</template>
						
						<template v-if="column.dataIndex === 'projectName'">
							<a-tooltip placement="topLeft">
								<template #title>
									<span>{{ text }}</span>
								</template>
								<span style="display: inline-block; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
									{{ text }}
								</span>
							</a-tooltip>
						</template>
						<template v-if="column.key === 'operate'">
							<a style="margin-left: 12px" @click="handleClick({ name: '查看', record, index })">{{t('control','查看')}}</a>
						</template>
					</template>
				</a-table>
			</div>
			<a-pagination style="text-align: center" @change="show" v-model:current="pagination.current" show-size-changer  v-model:pageSize="pagination.size"
				:total="pagination.totalElements" />
		</div>
	</div>
</template>
<script setup>
import { reactive, ref, watch, inject } from 'vue'
import minDatePicker from '@/components/common/minDatePicker.vue'
import { learningTeacherMyProjectStudentPage } from '@/request/learn/member'
import {  teacherRemove, studentCheck, teacherAddStudent, teacherEditStudent, studentSignedProject } from '@/request/process/member'
import { teacherProjectTeamApproved, teacherProjectTeamMyStudentList, teacherGradeClassFindAll } from '@/request/teacher/student/development'
import { message, Modal } from 'ant-design-vue'
import { useRouter } from 'vue-router'
import { t } from '@/i18n'

const searchData = ref({})
const pagination = ref({ totalElements: 0, current: 1, size: 10 })
const formModel = ref({})
const formRef = ref()
const modal = reactive({ visible: false, formDisable: false, name: '' })
const menus = reactive({ currentId: '', structure: [] })
const router =  useRouter()
const rules = {
	newProjectJobId: [
		{ required: true, message: '请选择', trigger: 'change', },
	],
	newTeamId: [
		{ required: true, message: '请输入', trigger: 'change', },
	],
}
const infoModalRef = ref()
const infoModal = reactive({
	visible: false,
	formRef: null,
	model: {},
	rules: {
		name: [
			{ required: true, message: t('common','请输入'), trigger: 'change', },
		],
	},
})
const originColumns = [
	{ title: t('table', '姓名'), dataIndex: 'studentName', key: 'studentName' },
	{ title: t('table', '学号'), dataIndex: 'studentNo', key: 'studentNo' },
	{ title: t('table', '班级'), dataIndex: 'className', key: 'className' }, 
	{ title: t('table', '加入时间'), dataIndex: 'joinTime', key: 'joinTime'},
	{ title: t('table', '状态'), dataIndex: 'joinStatus', key: 'joinStatus'},
	{ title: t('table', '任务列表'), dataIndex: 'operate', key: 'operate' },
]
const columns = ref([...originColumns])
const tableData = ref([])
const activeName = ref('已加入')
const conutGroup = ref({})

let pojectInfo = JSON.parse(sessionStorage.getItem('pojectInfo') || '{}')

const projectJobList = ref({})


const show = async () => {
	let req = {
		...pagination.value,
		page: pagination.value.current - 1,
		...searchData.value,
		learningId: pojectInfo.id,
	}
	let res = {
		列表: await learningTeacherMyProjectStudentPage(req),
  }
	if (res['列表']) {
		tableData.value = res['列表'].data.content
		pagination.value = {
			...pagination.value,
			...res['列表'].data.page
		}
	}
}
(async () => {
	show()
})()

const classStructure = ref([])
const handleChange = async (val) => {
	console.log(val)
	let res = await teacherGradeClassFindAll({'search_AND_EQ_grade.year': val})
	console.log(res, '?')
	if (!res) return classStructure.value = []
	classStructure.value = res.data
}
const selectedRowKeys = ref([])
const onSelectChange = keys => selectedRowKeys.value = keys


const getStudentProjectInfo = async ({name, num}) => {
	let sRes = await studentCheck({name, num})
	if(!sRes) return
	let otherRes = await studentSignedProject({studentId: sRes?.data || ''})
	return otherRes?.data
}
const handleClick = async ({ name, record }) => {
	let req = {
		...record
	}, res = null, operate = null, info = null
	switch (name) {
		case '查看':
			// 跳转到任务列表
			let info = router.resolve({
				name: 'stuTaskList',
				query: { studentId: record.studentId, learningId: pojectInfo.id},
			})
    	window.open(info.href, '_blank')
			break
	}
}




</script>

<style lang="scss" scoped>
$mainColor: #a84e91;

.cloneContainer {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: white;
		border-radius: 10px;
		height: 80px;
		padding: 20px;
		.item {
			cursor: pointer;
			margin-right: 15px;
			padding: 5px 10px;
			border: 1px solid transparent;
		}
		.activeItem {
			border-radius: 10px;
			/* border: 1px solid $mainColor; */
			box-shadow: $generalBoxShadow;
		}
	}

	.content {
		margin-top: 20px;
		padding: 20px;
		overflow: auto;
		flex: 1;
		display: flex;
		flex-direction: column;
		background: white;
		border-radius: 10px;
		
	}
}


.required {
    position: relative;
    /* padding-left: 30rpx; */
}
.required::before {
    content: '*';
    font-size: 16px;
    color: red;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -10px;
    margin: auto;
    display: flex;
    align-items: center;
}
</style>